Tech Talk


 
 

Getting to Know HTML, Part 2
by Emily Wilska


In this issue: Images, Background colors, Links, The birthday card, Practice, practice, practice


Last month we reviewed the basics of HTML, including tags, fonts and styles. This month, we'll take a look at adding images, background colors, and links to your Web pages and e-mail messages. And, we'll bring everything together by creating an e-mail birthday card.

If you missed last month's article, or if you'd like a refresher course, choose this link: Getting to Know HTML, Part 1.


Images
It's easy to use HTML to add photos and other images to Web pages or e-mail messages, as long as you know the location of the pictures you'd like to add.

To add an image to a Web page or e-mail message, you'd use HTML that looks like this:

<img src="http://www.url.com/image.jpg"> (Note: the <img> tag is a one-parter; it doesn't need a closing tag.)

The img refers to the image and src refers to source. As you can see, the src attribute is followed by an equal sign, and then a URL in quotes. You would replace the URL in this example with the Web address of the image you want to include.

Where can you find images to use on a Web page or e-mail message? Many of your fellow MSN TV users have created great image resources you can use. This list is a good place to start: MSN TV image resources.

Want to learn more about using images? This page has some helpful info: More about images

€ Back to top


Background colors
You can easily liven up the backgrounds of your Web pages and e-mail messages by adding background color. Here's how.

The main part of the Web page or e-mail message you're creating is called the body. In HTML, you can specify where the body starts and where it ends by using the <body> tag. Usually, you'll want to put this tag close to the start of your page or message, like this:

<html> <body>

To specify a background color, use the bgcolor attribute within the <body> tag, like this:

<body bgcolor="colorname">

Replace colorname with the name or RBHex number (remember those from last month?) of the color you want. Check out this page for lots of color choices: HTML colors

The color you specify will appear as the background for your entire Web page or e-mail message. At the end of your page or message, be sure to include a closing </body> tag right before your closing </html> tag. (</body></html>)

€ Back to top


Links
As you know, links are an easy way to jump from one place to another online. In e-mail, you can easily include a link by simply typing in a Web site address, like this: http://www.msn.com. However, to include a link without showing the entire URL, or to give a link a name or label, you'll want to use HTML.

Let's say you want to add to your Web page or e-mail message a link to the New York Times Web site, and you want to call the link "Today's News." Here's how that would look in HTML:

Today's News

Like the src attribute, href is followed by an equal sign, and then the URL of the Web site you're linking to (don't forget the quotes). Next comes the title you'd like to give the link, and then the closing </a> tag. Your final result will look like this:

<a href="http://www.nytimes.com">Today's News</a>

€ Back to top


Finally, the birthday card!
Now let's bring together everything we've learned about HTML to create an e-mail birthday card. You may want to print out this article or write down these steps so you'll have them handy.

  1. Start on the Write screen in Mail.
  2. Where you'd normally type your message, type <html>.
  3. Next, specify the background color you'd like. For this example, I'll use green, so the HTML will look like this: <body bgcolor="008000">
  4. Choose the color and font size you'd like to write your message in. I'll use large yellow font, like this: <font size=6 color="FFFF00">Happy Birthday!</font>
  5. If you'd like, you can add an image (perhaps a cake full of candles) using the <img> tag.
  6. Feeling generous? You may want to add a link to a Web site where the birthday boy or girl can pick out a gift — perhaps something like this:
    <a href="http://www.amazon.com">Choose a present!</a>
  7. When you're finished, type your closing </body> and </html> tags, in that order. Remember, the HTML tag should always be the last one on the page.

To check your HTML, you may want to send the card to yourself first. If you find any mistakes or anything you'd like to change, you can go back to the message in your Sent folder, choose Forward, and make your changes.

€ Back to top


Practice, practice, practice
HTML can be tricky at first, but with a little practice, you can easily be an HTML whiz. There are tons of newsgroups, Web sites, and e-mail lists devoted to learning and using HTML. Try searching for "HTML basics" or "getting started with HTML" to find more resources.

Good luck, and enjoy the wonderful, colorful, versatile world of HTML!

€ Back to top